<template>
    <el-card>
        <!--添加课程组件-->
        <option-btn :course-form="courseAddForm" :course-form-verify="courseAddFormRles" @addCourse="addCourse" ref="courseOptionBtnRef"/>
        <!-- 分隔符 -->
        <hr />
        <!--数据组件-->
        <data-component :data="dataTree" :data-title="dataFormTitle" :is-expand-all="isExpandAll" @update="onUpdate" @add="onAdd" @del="onDel"/>
        <!--对话框-->
        <el-dialog width="980px" :visible.sync="dialogSwitch" :before-close="beforeClose" :close-on-click-modal="false"
                :destroy-on-close="true">
                <add-component :entity="courseAddForm" :rules="courseAddFormRles" ref="childAddRef" v-if="switchType === 'add'"/>
                <update-component :entity="courseAddForm" :rules="courseAddFormRles" ref="updateRef" v-if="switchType === 'update'"/>
                <!-- 对话框组件的按钮-->
                <template #footer>
                    <el-button @click="confirmExecute" type="primary" size="mini">确认</el-button>
                    <el-button @click="switchEvent" type="info" size="mini">取消</el-button>
                </template>
        </el-dialog>
    </el-card>
</template>
  
<script>
    import optionBtn from './OptionBtn.vue'
    import {courseAddForm,courseAddFormRles} from './entity/AddForm'
    import dataComponent from './Data.vue'
    import {dataFormTitle} from './entity/DataForm'
    import {addCourseApi,getCourseTreeApi,updateCourseApi,deleteCourseApi} from '@/api/words/wordApi'
    import addComponent from './Add.vue'
    import updateComponent from './Update.vue'
    

    export default{
        components:{optionBtn,dataComponent,addComponent,updateComponent},
        data(){
            return{
                courseAddForm,
                courseAddFormRles,
                dataFormTitle,
                //数据是否折叠
                isExpandAll: false,
                //课程树（数据）
                dataTree:[],

                //对话框打开的类型
                switchType: '',
                //控制对话框的开启
                dialogSwitch: false,
            }
        },
        methods:{
            //数据是否折叠
            tableDataIsExpandAll() {
                this.isExpandAll = !this.isExpandAll;
            },
            //添加课程
            addCourse(){
                if(this.$refs.courseOptionBtnRef.validate()){
                    addCourseApi(this.courseAddForm).then(data=>{
                        this.$message.success("操作成功");
                        this.$refs.courseOptionBtnRef.reset();
                        this.getCourseTree();
                    }).catch(err =>{
                        this.$message.error(err);
                    })
                }
            },
            //查询课程树
            getCourseTree(){
                getCourseTreeApi().then(data=>{
                    this.dataTree = data;
                }).catch(err=>{
                    this.$message.error(err);
                })
            },
            //执行修改按钮
            onUpdate(row){
                this.courseAddForm.parentId = row.parentId;
                this.courseAddForm.courseId = row.courseId;
                this.courseAddForm.parentName = row.parentName;
                this.courseAddForm.courseName = row.courseName;
                this.switchType='update';
                this.switchEvent();
            },
            //执行新增子课程按钮
            onAdd(row){
                this.courseAddForm.parentId = row.courseId;
                this.courseAddForm.parentName = row.courseName;
                this.switchType='add';
                this.switchEvent();
            },
            //执行删除按钮
            onDel(row){
                this.$confirm(`确认是否删除[${row.parentName ? row.parentName+' - ' :""} ${row.courseName}]?`,"操作确认",{
                    confirmButtonText:"确认",
                    cancelButtonText:"取消",
                    type:"warning",
                }).then(()=>{
                    if(row.child.length > 0){
                        this.$message.error("请先删除子课程");
                    }else{
                        deleteCourseApi(row.courseId).then(data=>{
                            this.$message.success("操作成功");
                            this.getCourseTree(); 
                        })
                    }
                }).catch(()=>{}); 
            },
            //是否开启对话框
            switchEvent() {
                this.dialogSwitch = !this.dialogSwitch;
                if(this.dialogSwitch === false){
                    this.courseAddForm = {
                        courseId:null,
                        courseName:"",
                        parentId:0,
                        parentName:""
                    }
                }
            },
            //对话框关闭前校验
            beforeClose(done) {
                if (this.visible) {
                    done();
                } else {
                    done(false);
                }
            },
            //执行对话框
            confirmExecute(){
                if(this.switchType === 'add' && this.$refs.childAddRef.validate()){
                    addCourseApi(this.courseAddForm).then(data=>{
                        this.$message.success("操作成功");
                        this.$refs.childAddRef.reset();
                        this.switchEvent() 
                        this.getCourseTree();   
                    }).catch(err =>{
                        this.$message.error(err);
                    })
                }else if(this.switchType === 'update' && this.$refs.updateRef.validate()){
                    updateCourseApi(this.courseAddForm).then(data=>{
                        this.$message.success("操作成功");
                        this.$refs.updateRef.reset();
                        this.switchEvent() 
                        this.getCourseTree(); 
                    }).catch(err =>{
                        this.$message.error(err);
                    })
                }
            }
        },
        mounted(){
            this.getCourseTree()
        }
    }
</script>
  
<style scoped lang="scss"></style>
  